// 数字增长动画效果

// 确保DOM加载完成
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initCounters);
} else {
  initCounters();
}

function initCounters() {
  console.log('开始初始化数字增长效果');
  
  // 获取所有需要添加增长效果的数字元素
  const counterElements = document.querySelectorAll('.data-number');
  
  if (counterElements.length === 0) {
    console.log('未找到需要添加数字增长效果的元素');
    return;
  }
  
  // 创建IntersectionObserver来检测元素是否进入视口
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        // 当元素进入视口时，开始数字增长动画
        animateCounter(entry.target);
        // 取消对已动画元素的观察，避免重复动画
        observer.unobserve(entry.target);
      }
    });
  }, {
    // 设置阈值，当元素可见部分达到10%时触发
    threshold: 0.1
  });
  
  // 为每个数字元素添加观察
  counterElements.forEach(element => {
    observer.observe(element);
  });
  
  console.log('数字增长效果初始化完成');
}

function animateCounter(element) {
  // 获取目标数字文本
  const originalText = element.textContent;
  // 检查是否包含百分号
  const hasPercentage = originalText.includes('%');
  // 获取目标数字（去除逗号和百分号）
  const targetText = originalText.replace(/,/g, '').replace('%', '');
  const targetNumber = parseInt(targetText);
  
  if (isNaN(targetNumber)) {
    console.error('无法解析目标数字:', originalText);
    return;
  }
  
  // 保存原始格式信息
  element.dataset.hasPercentage = hasPercentage;
  
  // 动画持续时间（毫秒）
  const duration = 2000;
  // 动画帧率（每秒更新次数）
  const fps = 60;
  // 总帧数
  const totalFrames = Math.round(duration / (1000 / fps));
  // 当前帧
  let frame = 0;
  
  // 初始数字
  const startNumber = 0;
  
  // 动画函数
  function updateCounter() {
    frame++;
    // 使用缓动函数计算当前值
    const progress = easeOutQuart(frame / totalFrames);
    const currentValue = Math.round(startNumber + (targetNumber - startNumber) * progress);
    
    // 格式化数字并更新元素内容
    element.textContent = formatNumber(currentValue, element.dataset.hasPercentage === 'true');
    
    // 继续动画或结束
    if (frame < totalFrames) {
      requestAnimationFrame(updateCounter);
    } else {
      // 确保最终显示目标值
      element.textContent = formatNumber(targetNumber, element.dataset.hasPercentage === 'true');
    }
  }
  
  // 开始动画
  requestAnimationFrame(updateCounter);
}

// 缓动函数 - 四次方缓出
function easeOutQuart(t) {
  return 1 - Math.pow(1 - t, 4);
}

// 数字格式化函数 - 添加千位分隔符和可能的百分号
function formatNumber(num, hasPercentage = false) {
  const formatted = num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  return hasPercentage ? formatted + '%' : formatted;
}